<template>
  <div class="three-box" id="three-box"></div>
</template>

<script setup>
import { Group } from "three";
import { getCurrentInstance, onMounted, ref } from "vue";

const threeBox = ref();

let { proxy } = getCurrentInstance();
let THREE = proxy.$THREE;
// const threeBox = ref();
onMounted(() => {
  initThree();
});

const clock = new THREE.Clock();

const initThree = () => {
  const threeBox = document.getElementById("three-box");

  const scene = new THREE.Scene();

  const camera = new THREE.PerspectiveCamera(
    75,
    threeBox.clientWidth / threeBox.clientHeight,
    0.1,
    1000
  );

  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(threeBox.clientWidth, threeBox.clientHeight);
  camera.position.set(0, 0, 0);
  camera.lookAt(0, 0, 0);
  const group1 = new Group();//太阳系

  const geometry = new THREE.BoxGeometry(1, 1, 1);

  const material = new THREE.MeshNormalMaterial();
  const sun = new THREE.Mesh(geometry, material);
  sun.position.y = 0
  threeBox.appendChild(renderer.domElement);
group1.add(sun)
  scene.add(sun);


  const group = new Group();//地月系
  group.position.x = 2.5
  group.position.y = 3.5

  const sphere = new THREE.SphereGeometry(0.5, 54, 31);

  const material2 = new THREE.MeshBasicMaterial({ color: 0x0000ff });
  const earth = new THREE.Mesh(sphere, material2);
  
  group.add(earth);
  const sphere2 = new THREE.SphereGeometry(0.2, 27, 15);

  const material3 = new THREE.MeshBasicMaterial({ color: 0xffff00 });
  const moon = new THREE.Mesh(sphere2, material3);

  moon.position.x = 1.5;

  group.add(moon);


  threeBox.appendChild(renderer.domElement);

  group1.add(group)
  scene.add(group1);


  camera.position.z = 8;

  function animate() {
    const time = clock.getElapsedTime();

    // earth.position.x = Math.sin(time) * 3;
    // earth.position.y = Math.cos(time) * 3;

    // moon.position.x = -Math.sin(time) * 3;
    // moon.position.y = -Math.cos(time) * 3;

    // group.rotation.z = Math.cos(time*3)
    // earth.rotation.z = time;
    group1.rotation.z = time;
    group.rotation.z = time;

    // camera.rotation.z = time

    requestAnimationFrame(animate);

    renderer.render(scene, camera);
  }

  animate();
};
</script>

<style>
.three-box {
  position: fixed;
  top: 0;
  left: 200px;
  right: 0;
  bottom: 0;
  width: 100%;
}
</style>